<template>
  <div id="app" >
  <div v-if="this.$route.meta.keepAlive" class="header_">
    <homeHeader/>
  </div >
  <div v-if="this.$route.meta.keepAlive" class="changeP">
    <keep-alive >
    <router-view v-if="isRouterAlive"/>
  </keep-alive>
  </div>
  <div v-if="!this.$route.meta.keepAlive" class="changeP2">
    <keep-alive >
    <router-view v-if="isRouterAlive"/>
  </keep-alive>
  </div>
  </div>
</template>

<script>


import homeHeader from "./pages/Header/header.vue"

export default {
  name: 'App',
  provide(){
    return{
      reload:this.reaload
    }
  },
  data(){
    return{
      isRouterAlive:true
    }
  },
  components:{homeHeader},
  methods: {
    reload(){
      this.isRouterAlive=false
      this.$nextTick(function(){
        this.isRouterAlive=true
      })
    }
  },
}
</script>

<style scoped>
@import  "style/global.scss";
html,body{
  margin:0;
  padding: 0;
}
#app{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.changeP{
  position: absolute;
  width: 79%;
  height: 85vh;
  left:20%;
  top: 13vh;
  background-color: linear-gradient(0deg,rgba(239,246,255,.8),rgba(237,244,254,.8));
  border-radius: 10px 10px 10px 10px;
}
.changeP2{
  background-color:#444a5a;
  width: 100%;
  height: 100%;
}
</style>
